<template>
<!--能源企业能耗详情-->
    <div class="enterprise_energy_consumption">
        <div class="electricity" v-for="(item,index) in state.list" :key="index" :style="{ background: item.status==='water' ? 'rgba(72, 224, 162, .12) ' : 'rgba(79, 194, 255, .12)' }">
            <div class="electricity_fl">
                <div>
                    <img :src="item.imgIcon" alt="">
                </div>
                <div>
                    <p :style="{color:item.status==='water'?'#48E0A2':'#4FC2FF'}">
                        <span>{{item.quantity}}</span>
                        万度
                    </p>
                    <p>本月用电</p>
                </div>
            </div>
            <div class="electricity_fr">
                <p :style="{color:item.status==='water'?'#FFDC49':'#FF3238'}">
                    {{item.ratio}}
                    <img :src="item.ratioIcon" alt="">
                </p>
                <p>比上月</p>
            </div>
        </div>
        <div class="button">
            <el-button type="primary" @click="historical">历史数据</el-button>
        </div>
    </div>
</template>

<script lang="ts" setup>
import electricityicon from '@/assets/image/electricityicon.png'
import waterback from '@/assets/image/waterback.png'
import riseicon from '@/assets/image/riseicon.png'
import declineicon from '@/assets/image/declineicon.png'
import energyHistory from '@/components/custom/energy/modal/EnergyHistory/index.vue'
import {reactive} from "vue";
import renderPopconfirmComponent from "@/components/common/Popconfirm/index";
const emit = defineEmits(['hiden']);
const state=reactive({
    list:[{
        status:'electricity',
        imgIcon:electricityicon,
        ratioIcon:riseicon,
        quantity:150.09,
        ratio:'25%'
    },{
        status:'water',
        imgIcon:waterback,
        ratioIcon:declineicon,
        quantity:150.09,
        ratio:'25%'
    }]
})
const historical=()=>{
    renderPopconfirmComponent({ title: '山东梨树化学有限公司', showPop: true ,w:'50%'}, energyHistory);
    emit('hiden', false);
}
</script>

<style scoped lang="scss">
.enterprise_energy_consumption{
    padding: 30px;
    .electricity{
        margin-bottom: 16px;
        display: flex;
        align-items: center;
        justify-content: space-between;
        padding: 18px;
        letter-spacing: 2px;
        background: rgba(79, 194, 255, .12);
        border-radius: 4px;
        &_fl{
            display: flex;
            align-items: center;
            >div{
                &:nth-of-type(1){
                    width: 42px;
                    height: 42px;
                    margin-right: 20px;
                    img{
                        width: 100%;
                        height: 100%;
                    }
                }
                &:nth-of-type(2){
                    p{
                        font-size: 12px;
                        color: #FFFFFF;
                        &:nth-of-type(1){
                            margin-bottom: 6px;
                            color: #4FC2FF;
                            display: flex;
                            align-items: center;
                            span{
                                font-size: 14px;
                                display: block;
                                @include pmzd();
                            }
                        }
                    }
                }
            }
        }
        &_fr{
            p{
                font-size: 12px;
                color: #FFFFFF;
                &:nth-of-type(1){
                    display: flex;
                    align-items: center;
                    @include pmzd();
                    font-size: 14px;
                    color: #FF3238;
                    margin-bottom: 6px;
                    img{
                        width: 7px;
                        height: 9px;
                        margin-top: -2px;
                    }
                }
            }
        }
        &:last-child{
            margin-bottom: 0;
        }
    }
    .button{
        display: flex;
        justify-content: center;
        margin-top:32px;
        ::v-deep(.el-button){
            padding: 11px 32px;
        }
    }
}
</style>